<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getSSLAPI } from '@/api/search/index'
import { HttpCodeEnum } from '@packages/share/enums'
import { type AxiosResponse } from 'axios'
const props = defineProps({
  id: { type: String, required: true }
})
const certificateList = ref<any[]>([])

const getInfo = (id: string) => {
  getSSLAPI(id).then((res: AxiosResponse) => {
    const { rows, code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      certificateList.value = rows
    }
  })
}
onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <jm-card shadow="never" v-for="item in certificateList" :key="item.id" class="cards">
    <jm-tag type="danger" class="tags">{{ item.desc }}</jm-tag>
    <jm-descriptions :column="2">
      <jm-descriptions-item label="证书指纹：">{{ item.fingerprint }}</jm-descriptions-item>
      <jm-descriptions-item label=""></jm-descriptions-item>
      <jm-descriptions-item label="颁发时间：">{{ item.creatTime }}</jm-descriptions-item>
      <jm-descriptions-item label="失效时间：">{{ item.endTime }}</jm-descriptions-item>
      <jm-descriptions-item label="状态：">
        <jm-tag :type="item.status === '未过期' ? 'success' : 'info'">{{ item.status }}</jm-tag>
      </jm-descriptions-item>
      <jm-descriptions-item label="使用者名称：">{{ item.name }}</jm-descriptions-item>
      <jm-descriptions-item label="使用者国家地区：">{{ item.country }}</jm-descriptions-item>
      <jm-descriptions-item label="使用者单位名称：">{{ item.company }}</jm-descriptions-item>
      <jm-descriptions-item label="颁发者名称：">{{ item.issuerName }}</jm-descriptions-item>
      <jm-descriptions-item label="颁发者国家地区：">
        {{ item.issuerCountry }}
      </jm-descriptions-item>
      <jm-descriptions-item label="颁发者单位名称：">
        {{ item.issuerCompany }}
      </jm-descriptions-item>
      <jm-descriptions-item label="序列号：">{{ item.serial }}</jm-descriptions-item>
      <jm-descriptions-item label="用途：">{{ item.used }}</jm-descriptions-item>
      <jm-descriptions-item label="授权域名：">{{ item.host }}</jm-descriptions-item>
    </jm-descriptions>
  </jm-card>
</template>
<style scoped lang="scss">
.cards {
  margin-bottom: 1.25rem;
}
.tags {
  margin-bottom: 0.625rem;
}
</style>
